<template>
    <h3>组合式api:props</h3>
    <div>
        <h3 @click="editTitle">{{ tle }}</h3>
        <p>props.title:{{ title }}</p>
        <p>props.des:{{ des }}</p>
        <p>props.dao:{{ dao.name }}</p>
        <p>props.user:{{ user.sex }}</p>
        <p>props.des2:{{ des2 }}</p>
    </div>
  <div v-show="isShow" class="isShowHide">显示或隐藏</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const props=defineProps({
        title:{
            type:String,
            required:true
        },
        des:{
            type:[Number,String],
            default:'des的默认值'
        },
        dao:{
            type:Object,
            default(){
                return {
                    name:'青龙偃月刀',
                }
            }
        },
        user:{
            type:Object,
            default(rawProps:any){
                console.log(rawProps);
                return {
                    name:'小度小度' + rawProps.title,
                    sex:1,
                }
            }
        },
        des2:{
            type:[String,Number],
            default:'des2的默认值'
        },
        propH:{
            type:Function,
            default(){
                console.log('子组件props函数被调用');
                return 'Default function'
            }
        }
})
const tle=ref(props.title) 
const isShow=ref(false)
const sonTitle=ref('我是子组件定义的标题 sonTitle') 
const editTitle=()=>{
    tle.value='可以修改被props的值初始化后的状态变量'
    props.propH(sonTitle.value, showHander)
}
const showHander=()=>{
    isShow.value=!isShow.value
}
</script>
<style>
.isShowHide{
    height: 100%;
    width: 100%;
    background-color: cyan;
}
</style>